import React from 'react';


import classnames from 'classnames';
import {Spin} from 'antd';
// import OpenSeadragon from 'openseadragon';

//component
import ReIcon from 'components/widgets/ReIcon';


import './index.less';

const MAX_ZOOM_VALUE = 4;
const MIN_ZOOM_VALUE = 0.2;
const DEFAULT_ZOOM_VALUE = 1;


export default class view extends React.Component {
    static propTypes = {
        // name: React.PropTypes.string,
    };

    static defaultProps = {
        //name: 'component name'
    };


    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {
            src: '',
            visible: false,
            closeHandler: null,
            imageZoom: null,
            rangeValue: 0,
            min: 0,
            max: 0,
            showLoading: true,
        };
    }

    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {
        const {visible, src, closeHandler, imgWidth, imgHeight, defaultRadio} = this.props;
        let zoomLevel = 0;
        if (!imgWidth || !imgHeight) {
            zoomLevel = 0.5;
        } else if ((document.body.clientWidth / document.body.clientHeight) > (imgWidth / imgHeight)) {
            let scaleWidth = imgWidth * document.body.clientHeight / imgHeight / document.body.clientWidth;
            zoomLevel = scaleWidth * 0.8;
        } else {
            zoomLevel = 0.85;
        }
        this.setState({
            visible, src, closeHandler,
            imageZoom: new OpenSeadragon({
                id: 'imgZoom',
                prefixUrl: '/assets/images/components/widgets/ImageZoom/images/',
                tileSources: {
                    type: 'image',
                    url: !$$.utils.IsPC() ? $$.utils.pictureThumb(src, true, 2048) : src,
                    // crossOriginPolicy: 'Anonymous'
                },
                minZoomLevel: imgHeight > imgWidth ? MIN_ZOOM_VALUE / 2 : MIN_ZOOM_VALUE,
                maxZoomLevel: MAX_ZOOM_VALUE,
                zoomInButton: 'plus',
                zoomOutButton: 'less',
                defaultZoomLevel: zoomLevel,
                visibilityRatio: DEFAULT_ZOOM_VALUE,
            }),
            rangeValue: zoomLevel,
            min: imgHeight > imgWidth ? MIN_ZOOM_VALUE / 2 : MIN_ZOOM_VALUE,
            max: MAX_ZOOM_VALUE,
        });

        setTimeout(() => {
            let {imageZoom} = this.state;
            imageZoom.addHandler('canvas-click', () => {
                setTimeout(() => {
                    this.setState({rangeValue: this.state.imageZoom.viewport.zoomSpring.target.value});
                }, 20);
            });
            imageZoom.addHandler('canvas-scroll', () => {
                this.setState({rangeValue: imageZoom.viewport.zoomSpring.target.value});
            });
            imageZoom.addHandler('tile-drawn', () => {
                this.setState({showLoading: false});
            });
        }, 20);
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    imageZoomOut(e) {
        e.preventDefault();
        this.setState({rangeValue: this.state.imageZoom.viewport.zoomSpring.target.value});
    }

    imageZoomIn(e) {
        e.preventDefault();
        this.setState({rangeValue: this.state.imageZoom.viewport.zoomSpring.target.value});
    }

    rangeChange(e) {
        let {imageZoom} = this.state;
        this.setState({rangeValue: e.target.value});
        imageZoom.viewport.zoomTo(e.target.value);
    }

    render() {
        const {closeHandler, rangeValue, min, max, showLoading} = this.state;
        const {visible} = this.props;

        const classNames = classnames({
            'orin-w-imagezoom-root': true,
            [this.props.className]: this.props.className ? true : false
        });

        let width = (rangeValue - min) / (max - min) * 98;
        return (
            <div className={visible ? classNames + ' fade-in' : classNames + ' fade-out'}>
                <span className="close-wrapper" onClick={(e) => closeHandler()}>
                    <ReIcon className="close-image-zoom" icon="delete"/>
                </span>
                <div id="imgZoom" className="image-zoom-wrapper">
                    <Spin spinning={showLoading} size="large"/>
                </div>
                <div id="toolBar" className="tool-bar">
                    <p id="less" className="image-zoom-less" onClick={(e) => this.imageZoomOut(e)}><ReIcon
                        icon="less"/></p>
                    <div className="image-zoom-slider">
                        <div className="range-gone-wrapper">
                            <div className="range-gone" style={{width: `${width}%`}}/>
                        </div>
                        <input type="range" name="points" value={rangeValue} min={min} max={max}
                               step="0.00001" ref="range"
                               className="image-zoom-range" onChange={(e) => this.rangeChange(e)}/>
                    </div>
                    <p id="plus" className="image-zoom-plus" onClick={(e) => this.imageZoomIn(e)}><ReIcon
                        icon="plus"/></p>
                </div>
            </div>
        );
    }
}
